<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>其他坐标变换成高德坐标</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="/amap/assets/css/style.min.css?version=1.0.0" />
    <style>
        html,body,#container{
            height:100%;
            width:100%;
        }
        .btn-box{
            position: absolute;
            right: 5rem;
            top: 5rem;
        }
        .btn{
            background: '#0277bd';
            width: 14em;
            margin-left: 3.2rem;  
            margin-top: 0.8rem; 
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="coordinate-input-wrap" id="set-coordinate-wrap">
        <input type="text" class="input-item-wrap lng-input" id="lng-item" value="120.123451" placeholder="请输入经度坐标" />
        <input type="text" class="input-item-wrap lat-input" id="lat-item" value="35.123451" placeholder="请输入维度坐标" />
        <div class="btn-item submit-btn-item" onclick="submitSetCoordinate()">
            <div class="btn-title">确定</div>
        </div>
    </div>
    <div class="input-card" style="width:18rem">
        <h4>坐标转换</h4>
        <div id="coordinate">
            <div class="input-item">
                <input id="gps" name="language" type="radio" checked="checked" />
                <span class="input-text">GPS 坐标转为高德坐标</span>
            </div>
            <div class="input-item">
                <input id="mapbar" name="language" type="radio" />
                <span class="input-text">图吧坐标转为高德坐标</span>
            </div>
            <div class="input-item">
                <input id="baidu" name="language" type="radio" />
                <span class="input-text">百度坐标转为高德坐标</span>
            </div>
        </div>
    </div>
    <script>
    window._AMapSecurityConfig = {
        serviceHost: 'http://debug.3todo.com/_AMapService',
    }
    </script>
    <script src="http://webapi.amap.com/maps?v=2.0&key=c320d71a56974ae475f6592f5e46c2c8"></script>
    <script>
    var btnType = 'gps';
    var lngValue = '116.473222';
    var latValue = '39.993214';

    var $ = function(elementId) {
        return document.getElementById(elementId);
    };

    $('set-coordinate-wrap').onkeydown = function(event) {
        var e = event || window.event;
        if (e && e.keyCode == 13) {
            submitSetCoordinate();
        }
    }

    function submitSetCoordinate() {
        lngValue = $('lng-item').value;
        latValue = $('lat-item').value;
        if (!lngValue || !latValue) {
            lngValue = '116.473222';
            latValue = '39.993214';
            return alert('请输入坐标位置');
        }
        setCoordinate();
        console.log('lngValue, latValue---->', lngValue, latValue);
    }


    var map = new AMap.Map("container", {
        center: [lngValue, latValue],
        zoom: 15
    });

    // 创建gps坐标位置点标记
    var lnglat = [lngValue, latValue];
    var m1 = new AMap.Marker({
        position: lnglat,
        icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
    });
    map.add(m1);
    m1.setLabel({
        offset: new AMap.Pixel(20, 20),
        content: "GPS 坐标系中位置"
    });
    var m2;

    // 坐标转换
    function convertFrom(lnglat, type) {
        AMap.convertFrom(lnglat, type, function(status, result) {
            if (result.info === 'ok') {
                var resLnglat = result.locations[0];
                m2 = new AMap.Marker({
                    position: resLnglat,
                });
                map.add(m2);
                // 设置标签
                m2.setLabel({
                    offset: new AMap.Pixel(20, 20),
                    content: "高德坐标系中位置（正确）"
                });
            } else {
                console.error('result---->', result);
            }
        });
    }
    convertFrom(lnglat, 'gps');


    function setCoordinate() {
        if (this.id) {
            btnType = this.id;
        }
        var m1Text = "GPS 坐标系中位置";
        if (btnType == 'mapbar') {
            m1Text = '图吧坐标系中位置';
            lnglat = [lngValue, latValue]; // 图吧坐标系下位置
        } else if (btnType == 'baidu') {
            m1Text = '百度坐标系中位置';
            lnglat = [lngValue, latValue]; // 百度坐标系下位置
        } else if (btnType == 'gps') {
            lnglat = [lngValue, latValue]; // 百度坐标系下位置
        }
        // 设置label标签
        m1.setLabel({
            offset: new AMap.Pixel(20, 20),
            content: m1Text
        });
        m1.setPosition(lnglat);
        map.remove(m2);
        // 坐标转换
        convertFrom(lnglat, btnType);
        map.setCenter(lnglat);

    }

    //绑定radio点击事件
    var radios = document.querySelectorAll("#coordinate input");
    radios.forEach(function(ratio) {
        ratio.onclick = setCoordinate;
    });
    </script>
</body>

</html>